<template>
  <div class="wrap">
    <div class="top">
      <el-date-picker
        v-model="date"
        type="date"
        placeholder="选择日期">
      </el-date-picker>

      <el-time-picker
        v-model="fromtime"
        :picker-options="{
      selectableRange: '07:00:00 - 22:00:00'
    }"
        placeholder="任意时间点">
      </el-time-picker>
      <el-time-picker
        v-model="totime"
        :picker-options="{
      selectableRange: '07:00:00 - 22:00:00'
    }"
        placeholder="任意时间点">
      </el-time-picker>
      <el-button type="primary" icon="el-icon-search"  @click="getseat">搜索</el-button>
    </div>

<!--    111111111111-->
    <template>
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="1000">
        <el-table-column
          prop="jsld"
          label="教室楼栋"
          width="300">
        </el-table-column>
        <el-table-column
          prop="jsfh"
          label="教室房号"
          width="300">
        </el-table-column>
        <el-table-column
          prop="jszws"
          label="总座位数"
          width="300">
        </el-table-column>
        <el-table-column
          prop="syzws"
          label="剩余座位数"
          width="300">
        </el-table-column>
        <el-table-column
          label="操作"
          width="200">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="getRow(scope.$index, tableData)"
              type="success"
              size="small">
              预约
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>



</template>

<script>

  import { getappointmentroom, appointmentroom} from '@/api/student/index'
  import {feedback} from "@/api/admin/feedback";

export default {

  data() {
    return {
      seat: null,
      listLoading: true,
      date: '',
      fromtime: '',
      totime: '',
      tableData: [],
      getroomid: Object,
      getroom: {},
      currentPage: 1,
      total:1,
      pageSize:5,pageNum: 1
    }
  },
  created() {

  },
  methods: {
    handleSizeChange(val) {
      this.pageSize=val;
      this.getseat();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getseat()
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //搜索必须全输入 不然就调用该方法弹窗
    //预约提示变量 1搜索提示信息 2预约成功提示 3预约失败提示
    open(tips) {
      if (tips == 1) {
        this.$alert('<strong> 需 要 输 入 三 个 完 整 的 时 间 </strong>', '操作错误！', {
          dangerouslyUseHTMLString: true
        })
      }else if (tips == 2) {
        this.$alert('<strong> 预 约 成 功 ! </strong>', '成功', {
          dangerouslyUseHTMLString: true
        })
      }else {
        this.$alert('<strong> 预 约 失 败 ! </strong>', '失败', {
          dangerouslyUseHTMLString: true
        })
      }
    },

    //时间格式化 var createtime=new Date(data[i].createtime)
    formatTen(num) {
      return num > 9 ? (num + "") : ("0" + num);
    },
    formatdate(date) {
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();

      return year + "-" + this.formatTen(month) + "-" + this.formatTen(day)
    },
    formatfromtime(date) {
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      // return this.formatTen(hour)+":"+this.formatTen(minute)+":"+this.formatTen(second);
      return year + "-" + this.formatTen(month) + "-" + this.formatTen(day)+" "+this.formatTen(hour)+":"+this.formatTen(minute)+":"+this.formatTen(second)
      // return year + "-" + this.formatTen(month) + "-" + this.formatTen(day)
    },

    //根据选择时间搜索可预约教室
    getseat() {
      if (this.date && this.fromtime && this.totime) {
        getappointmentroom(this.date,this.fromtime,this.totime,this.pageNum,this.pageSize).then( res =>{
          this.tableData = res.data.classroom
          this.total = res.data.total
          // console.log(this.tableData)
        }).catch(err => {
          console.log('获取教室数据失败',err)
        })
      }else {
        //时间没填完整的操作
        this.open(1)
        return
      }
    },
    //得到该行信息 进行预约
    getRow(index, rows) {
      //获取预约日期
      let createdate=new Date(this.date);
      this.date = this.formatdate(createdate)
      // console.log(this.date)

      //获取预约开始时间
      let createfromtime = new Date(this.fromtime)
      this.fromtime = this.formatfromtime(createfromtime)
      // console.log(this.fromtime.slice(11))

      //获取预约结束时间
      let createtotime = new Date(this.totime)
      this.totime = this.formatfromtime(createtotime)
      // console.log(this.totime.slice(11))

      //点击预约得到预约的教室id getroomid
      this.getroomid = rows.slice(index, index + 1)[0].jsid
      appointmentroom(this.getroomid,this.date,this.fromtime.slice(11),this.totime.slice(11)).then( res => {
        this.open(2)
        console.log(res,'预约成功了')
      }).catch(err=>{
        this.open()
        console.log(err,'预约有错误')
      })
    }

  }
}
</script>


<style lang="scss" scoped>
  .wrap{
    width: 1400px;
    height: 100%;
    margin-left: 5%;
    margin-top: 2%;
    /*background-color: #3a835d;*/
  }
  .top{
    padding-left: 36%;
    width: 100%;
  }
  .el-table{
    width: 100%;
  }
  .el-table::before {
    left: 0;
    bottom: 0;
    width: 90%;
    height: 1px;
  }
</style>
